<template>
	<view>
		<view class="cardBox" :key="item.id" @click="choose(item)" v-if="type == 1">
			<view class="up">
				<view class="left" v-if="item.is_rest == 1">
					<image style="width: 24rpx;height: 24rpx;" src="/static/disonLine.png" mode="widthFix"></image>
					<text class="u-font-26" style="color: #FFA900;">忙碌中</text>
				</view>
				<view class="left" v-else>
					<image style="width: 24rpx;height: 24rpx;" src="/static/onLine.png" mode="widthFix"></image>
					<text class="u-font-26" v-if="item.timeInfo.starttime">最早可约{{changetime(item.timeInfo.starttime)}}</text>
				</view>
				<view class="right" v-if="item.is_free == 1">
					<text class="u-font-26">免费出行</text>
				</view>
				<view class="right" v-else>
					<image style="width: 23rpx;height: 25rpx;" src="/static/address_grey.png" mode="widthFix"></image>
					<text class="u-font-26">距您 {{Number(item.juli).toFixed(2)}}km</text>
				</view>
			</view>
			<view class="center">
				<view class="touxiang">
					<u--image class="avatar" shape="circle" :fade="true" :src="oss(item.work_image)" width="160rpx" height="160rpx"></u--image>
					<view class="pingfen">
						<image style="width: 20rpx;height: 20rpx;margin-right: 10rpx;" src="/static/star.png" mode="widthFix"></image>
						<text class="u-font-26">{{item.score > 0 ? item.score : '5.0'}}</text>
					</view>
				</view>
				<view class="rightBox">
					<view class="namepic">
						<text class="name">{{item.name}}</text>
						<view class="more u-m-l-20">
							<text v-if="item.images" @click.stop="preimg(item.images,$event)" class="pic">更多照片</text>
						</view>
					</view>
					<view class="numBox">
						<text class="num">已接{{item.sale}}单</text>
					</view>
					<view class="pinglun">
						<view class="p">
							<image style="width: 26rpx;height: 26rpx;" src="/static/pingjia.png" mode="widthFix"></image>
							<text class="u-font-26 nums">{{item.commentNum}}</text>
						</view>
						<view class="zan">
							<image style="width: 27rpx;height: 23rpx;" src="/static/xin.png" mode="widthFix"></image>
							<text class="u-font-26 nums">{{item.collectNum}}</text>
						</view>
						<view class="blank"></view>
						<template v-if="select">
							<view class="select circle" v-if="ids!=item.user_id"></view>
							<image class="select" v-else src="/static/selected.png" mode="widthFix"></image>
						</template>
						<text class="liji white u-font-26" v-else @click.stop="selectServe(item)">
							立即预约
						</text>
					</view>
				</view>
				<view class="store" v-if="item.shopnames">
					<image class="u-m-r-10" style="width: 24rpx;height: 22rpx;" src="/static/store.png" mode="widthFix">
					</image>
					<text class="u-font-26 word" @click.stop="toshop(item,$event)">{{item.shopnames.substr(0,4)}}</text>
					<image class="u-m-l-10" style="width: 7rpx;height: 13rpx;" src="/static/right.png" mode="widthFix">
					</image>
				</view>
				
				<view class="store" v-else>
					<image class="u-m-r-10" style="width: 24rpx;height: 22rpx;" src="/static/store.png" mode="widthFix">
					</image>
					<text class="u-font-26 word" @click.stop="tocert(item,$event)">{{item.shopintro}}</text>
					<image class="u-m-l-10" style="width: 7rpx;height: 13rpx;" src="/static/right.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<view class="newbox flex" :key="item.id" @click="choose(item)" v-else >
			<template v-if="select">
				<view class="select circle" v-if="ids!=item.user_id"></view>
				<image class="select" v-else src="/static/selected.png" mode="widthFix"></image>
			</template>
			<view class="newbox_avatar">
				<!-- 新人 -->
				<view class="newRen u-font-26" v-if="item.isnew">
					<image src="../../static/newPeople.png" mode="aspectFill"></image>
				</view>
				<!-- 皇冠 -->
				<view class="hg u-font-26" v-if="item.iscrown">
					<image src="../../static/hg.png" mode="aspectFill"></image>
				</view>
				<!-- 火热 -->
				<view class="huo u-font-26" v-if="item.isfire">
					<image src="../../static/huo.png" mode="aspectFill"></image>
				</view>
				<!-- 赞 -->
				<view class="zan u-font-26" v-if="item.isgood">
					<image src="../../static/zan.png" mode="aspectFill"></image>
				</view>
				<u--image class="avatar" shape="circle" :fade="true" :src="oss(item.work_image)" width="170rpx" height="170rpx"></u--image>
				<view class="newbox_avatar_text flex" style="align-items: center;">
					<text @click.stop="preimg(item.images,$event)" class="word">更多照片</text>
					<u-icon name='play-right-fill' class="u-m-t-5 u-m-l-5" size="10" color="#FFECBA"></u-icon>
				</view>
			</view>
			<view class="newbox_right flex">
				<view class="newbox_right_top flex">
					<view class="newbox_right_top_left flex">
						<text class="jsname u-m-r-10">{{item.name}}</text>
						<view class="star flex">
							<image class="starimg u-m-r-5" src="../../static/pages_technician/starb.png" mode=""></image>
							<text class="word">{{item.score > 0 ? item.score : '5.0'}}</text>
						</view>
					</view>
					<view class="newbox_right_top_right flex"  v-if="item.is_rest == 1">
						<view class="timetitle">
							<text class="word">忙碌中</text>
						</view>
						<view class="time">
							<text class="word">不可约</text>
						</view>
					</view>
					<view class="newbox_right_top_right flex" v-else>
						<view class="timetitle">
							<text class="word">最早可约</text>
						</view>
						<view class="time" v-if="item.timeInfo.starttime">
							<text class="word">{{changetime(item.timeInfo.starttime)}}</text>
						</view>
					</view>
				</view>
				<view class="newbox_right_bottom flex">
					<view class="newbox_right_bottom_left flex">
						<view class="newbox_right_bottom_left_one flex u-m-t-20" v-if="item.shopnames">
							<image class="shopimg u-m-r-10" src="../../static/pages_technician/shop.png" mode=""></image>
							<text @click.stop="toshop(item,$event)" class="shopname">{{item.shopnames.substring(0,6)}}</text>
						</view>
						<view v-else class="newbox_right_bottom_left_one flex u-m-t-20">
							<image class="shopimg u-m-r-10" src="../../static/pages_technician/shop.png" mode=""></image>
							<text @click.stop="tocert(item,$event)" class="shopname">{{item.shopintro}}</text>
						</view>
						
						<view class="newbox_right_bottom_left_two flex u-m-t-20">
							<text class="had">已服务{{item.sale}}单</text>
							<view class="flex numBox" style="flex-direction: row; align-items: center;">
								<image class="comments " src="../../static/pages_technician/comment.png" mode=""></image>
								<text class="u-m-l-10 numword">{{item.commentNum}}</text>
							</view>
							<view class="flex" style="flex-direction: row; align-items: center;" >
								<image class="xins " src="../../static/pages_technician/love.png" mode=""></image>
								<text class="u-m-l-10 numword">{{item.collectNum}}</text>
							</view>
							
						</view>
					</view>
					<view class="newbox_right_bottom_right flex u-m-t-10">
						<text class="distance">
							距您{{Number(item.juli).toFixed(2)}}km
						</text>
						<text class="Ljbtn" @click.stop="selectServe(item)">
							立即预约
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configs from '@/common/config.js'
	export default {
		props: ['item', 'select', 'ids','type'],
		data() {
			return {};
		},
		methods: {
			selectServe(item){
				this.$emit('popOut', item.id,item.user_id)
			},
			//时间戳转化
			changetime(value){
				var now = new Date(value*1000);
				var year = now.getFullYear();
				var month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1);
				var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
				var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
				var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
				var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
				let data = {
					year,
					month,
					day,
					hour,
					minute,
					second,
					time: hour + ':' + minute 
				}
				return data.time;
			},
			preimg(url,e) {
				let arr =[]
				url.map(item=>{
					item = this.oss(item)
					arr.push(item)
				})
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			choose(item) {
				this.$emit('choose', item.user_id)
				this.$emit('detail', item.id)
			},
			toshop(id,e) {
				uni.navigateTo({
					url: '/pages_technician/shopdetail/shopdetail?store_id=' + id.store_id
				})
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			tocert(item,e){
				console.log(item)
				this.$goTo('/pages_technician/jsDetails/cert?card=' + item.card + '&skill_image=' + item.skill_image + '&health_image=' + item.health_image + '&business_image=' + item.business_image + '&shopname=' + item.shopname)
			},
			oss(url) {
				if (!url) {
					url = this.$store.state.config.user_logo_image
				}
				if (typeof url === 'string') {
					if ((/^(http|https):\/\/.+/.test(url))) {
						return url
					} else {
						return configs.imgUrl + url
					}
				} else {
					let arr = []
					for (let i = 0; i < url.length; i++) {
						if ((/^(http|https):\/\/.+/.test(url[i]))) {
							arr.push(url[i])
						} else {
							arr.push(configs.imgUrl + url[i])
						}
					}
					return arr
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-font-26{
		font-size: 26rpx;
	}
	.u-m-r-10{
		margin-right: 10rpx;
	}
	.u-m-t-20{
		margin-top: 20rpx;
	}
	.u-m-l-10{
		margin-left: 10rpx;
	}
	.flex-cneter{
		justify-content: center;
		align-items: center;
	}
	.u-m-l-5{
		margin-left: 5rpx;
	}
	.u-m-t-5{
		margin-top: 5rpx;
	}
	.u-m-l-20{
		margin-right: 20rpx;
	}
	.white{
		color: #fff;
	}
	.cardBox {
		background: #FBFBFE;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0;
		box-sizing: border-box;
		.up {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: 500;
			height: 67rpx;
			color: #00CE9B;
			padding: 0 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: $uni-primary;
			}

			image {
				width: 24rpx;
				margin-right: 10rpx;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #1C274C;
			}
		}

		.center {
			
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			padding: 20rpx;
			position: relative;

			.store {
				padding: 0 10rpx;
				height: 57rpx;
				background: #EBFBF7;
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				font-size: 22rpx;
				color: $uni-primary;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: absolute;

				margin-left: 16rpx;
				/* #ifdef APP-NVUE */
				right: 20rpx;
				/* #endif */
				/* #ifndef APP-NVUE */
				right: 0;
				/* #endif */

				image:first-child {
					width: 24rpx;
					margin-right: 10rpx;
				}

				image:last-child {
					margin-left: 12rpx;
					width: 10rpx;
				}

				.word {
					color: $uni-primary;
					font-size: 22rpx;
				}
			}

			.touxiang {
				width: 160rpx;
				position: relative;
				margin-right: 20rpx;

				.avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.pingfen {
					width: 100rpx;
					height: 38rpx;
					background: #FE6051;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0rpx;
					left: 30rpx;

					image {
						width: 20rpx;
						margin-right: 8rpx;
					}

					.u-font-26 {
						color: #fff;
					}
				}
			}

			.rightBox {
				flex: 1;
				overflow: hidden;
				position: relative;

				.namepic {
					display: flex;
					flex-direction: row;
					align-items: center;
					.more{
						width: 104rpx;
						height: 38rpx;
						background-color: #00CE9B;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						margin-left: 20rpx;
					}
					.pic {
						font-size: 20rpx;
						color: #fff;
						
						
					}
				}

				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: #1C274C;
					line-height: 42rpx;
				}

				.numBox {
					width: 140rpx;
					height: 38rpx;
					border-radius: 10rpx;
					border: 2rpx solid #342D3B;
					background: #fff;
					margin: 15rpx 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.num {

						font-size: 20rpx;
						font-weight: 400;
						color: #342D3B;

					}
				}


				.pinglun {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 26rpx;
					color: #1C274C;

					// position: relative;

					image {
						width: 26rpx;

					}

					.nums {
						margin-left: 10rpx;
						font-size: 26rpx;
					}

					.select {
						width: 32rpx;
						height: 32rpx;
						margin: 0;
						position: absolute;
						right: 30rpx;
					}

					.p {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						border-right: 1rpx solid rgba(28, 39, 76, .3);
						padding-right: 30rpx;
					}

					.zan {
						align-items: center;
						display: flex;
						justify-content: center;

						flex-direction: row;
						padding-left: 30rpx;
					}

					.blank {
						flex: 1;
					}

					.liji {
						padding: 10rpx 30rpx;
						background: $uni-primary;
						border-radius: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;

					}

				}

			}
		}
	}
	.newbox{
		background: #FBFBFE;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		flex-direction: row;
		.select {
			width: 32rpx;
			height: 32rpx;
			margin: 0;
			position: absolute;
			left: 30rpx;
		}
		.newbox_avatar{
			position: relative;
			width: 170rpx;
			.newRen {
				position: absolute;
				top: 2rpx;
				z-index: 99;
				width: 100rpx;
				height: 100rpx;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
			
			.hg {
				position: absolute;
				// top: 2rpx;
				bottom: 18rpx;
				z-index: 9;
				width: 185rpx;
				height: 185rpx;
				image {
					width: 185rpx;
					height: 185rpx;
				}
			}
			.huo {
				position: absolute;
				top: 2rpx;
				z-index: 99;
				width: 100rpx;
				height: 100rpx;
				image {
					width: 38rpx;
					height: 38rpx;
				}
			}
			
			.zan {
				position: absolute;
				// top: 2rpx;
				bottom: 40rpx;
				right: 20rpx;
				z-index: 99;
				width: 38rpx;
				height: 38rpx;
				image {
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
		
		.newbox_avatar_text{
			box-sizing: border-box;
			width: 120rpx;
			padding: 5rpx 0;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			background-color: #333;
			z-index: 99;
			
			bottom: 0;
			border-radius: 10rpx;
			left: 25rpx;
			.word{
				color: #FFECBA;
				font-size: 20rpx;
			}
		}
		.newbox_right{
			flex-direction: column;
			margin-left: 20rpx;
			justify-content: space-around;
			flex: 1;
			margin-top: 10rpx;
			.newbox_right_top{
				flex-direction: row;
				justify-content: space-between;
				.newbox_right_top_left{
					flex-direction: row;
					align-items: center;
					.jsname{
						display: block;
						font-weight: bold;
						font-size: 30rpx;
					}
					.star{
						align-items: center;
						flex-direction: row;
						color: #FABE49;
						.starimg{
							width: 26rpx;
							height: 26rpx;
						}
						.word{
							color: #FABE49;
							font-size: 24rpx;
						}
					}
				}
				.newbox_right_top_right{
					flex-direction: row;
					font-size: 26rpx;
					color: #00CE9B;
					.timetitle{
						background: #C8F5E9;
						padding:  10rpx;
						border-radius: 10rpx 0 0 10rpx;
						
						.word{
							font-size: 22rpx;
							color: #00CE9B;
						}
					}
					.time{
						background: rgba(0,206,155,0.08);
						padding:  10rpx;
						border-radius:  0 10rpx  10rpx 0;
						.word{
							font-size: 22rpx;
							color: #00CE9B;
						}
					}
				}
			}
			.newbox_right_bottom{
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.newbox_right_bottom_left{
					flex-direction: column;
					.newbox_right_bottom_left_one{
						color: #999;
						flex-direction: row;
						font-size: 26rpx;
						align-items: center;
						.shopimg{
							width: 28rpx;
							height: 26rpx;
						}
						.shopname{
							color:#999999;
							font-size: 24rpx;
						}
					}
					.newbox_right_bottom_left_two{
						justify-content: space-between;
						width: 280rpx;
						flex-direction: row;
						font-size: 24rpx;
						color: #999;
						align-items: center;
						.had{
							color: #666666;
							font-size: 22rpx;
						}
						.comments{
							width: 24rpx;
							height: 24rpx;
						}
						.xins{
							width: 24rpx;
							height: 24rpx;
						}
						.numword{
							color: #999999;
							font-size: 22rpx;
						}
					}
				}
				.newbox_right_bottom_right{
					flex-direction: column;
					border: 4rpx solid #00CE9B;
					border-radius: 10rpx;
					.distance{
						color: #999;
						font-size: 20rpx;
						text-align: center;
						padding: 6rpx 10rpx;
					}
					.Ljbtn{
						color: #fff;
						background-color: #00CE9B;
						text-align: center;
						padding: 10rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>